<template>
  <j-modal
    :title="'预测结果'"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :fullscreen="true"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <template slot="footer"> 
      <a-button  @click="handleCancel">关闭</a-button> 
    </template>
    <a-spin :spinning="confirmLoading"> 
        <a-card :bordered="false" title="">
        <a-row type="flex">
        <a-col :span="18"> 
        <a-row type="flex" :gutter="16"  style="margin-bottom: 10px;">
          <a-col :span="8">数据集：{{model.datasetCode}}</a-col>
          <a-col :span="8">模型：{{model.modelBaseCode}}</a-col>
          <a-col :span="8">属性：{{model.predictProperty}}</a-col> 
        </a-row> 
              <a-table 
                ref="table"
                size="middle"
                bordered
                rowKey="id"
                class="j-table-force-nowrap"
                :scroll="{ x: true }"
                :columns="[ {
                  title: '列名',
                  align: 'center',
                  dataIndex: 'column_name', 
                }, {
                  title: '随机上限',
                  align: 'center',
                  dataIndex: 'range_max', 
                }, {
                  title: '随机下限',
                  align: 'center',
                  dataIndex: 'range_min', 
                },]"
                :dataSource="model.resetColumns" 
                :pagination="false"
              >
              </a-table> 
          </a-col>
            <a-col :span="6" style="text-align: center;font-size: 24px;"> 
              <div>RMSE（均方根误差）</div>
              <div style="margin-top: 16px;font-weight: bold;">
                {{ dataSource.RMSE }} 
              </div> 
            </a-col> 
          </a-row>
        </a-card> 
      <div id="main" :style="{ width: '100%', height: height + 'px' }"></div> 
    </a-spin>
  </j-modal>
</template>

<script> 
import * as echarts from 'echarts'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag' 
export default {
  name: 'ExtractModal',
  mixins: [JeecgListMixin],
  components: {
    JMultiSelectTag, 
  },
  data() {
    return {
      title: '',
      width: 900,
      height: 500,
      visible: false,
      disableSubmit: false, 
      model: {},
      propertyName:'',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false, 
    }
  },
  methods: {
    show(data) {
      var that = this;
      this.visible = true
      this.confirmLoading = false
      this.dataSource = data.result
      this.model = data.param; 
      //this.handleChart()
      setTimeout(() => {
           that.loadTb();
      }, 1000);
   
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.$emit('close')
      this.visible = false
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    }, 
    loadTb() {
      var that = this
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          position: function (pt) {
            return [pt[0], '10%']
          },
        },
        title: {
          // left: 'center',
          text: '',//'[ ' + that.model.predictProperty + ' ] 预测分析',
        },
        legend: {
          data: ['实际值','预测值']
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap:false
          // axisLabel: {
          //     interval: 30, // 显示所有刻度
          //     rotate: 30 // 将刻度旋转30度
          // }
        },
        yAxis: {
          type: 'value',
          // boundaryGap: [0, '100%'],
          // interval: that.yAxisInterval, //分割刻度
          // min: that.yAxisMin,
          // max: that.yAxisMax,
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        series: [ 
          {
            name: "实际值",
            type: 'line',
            showSymbol: false, 
            itemStyle: {
              color: 'blue',
            }, 
            data: that.dataSource.origin_values,
          },
           {
            name: "预测值",
            type: 'line',
            showSymbol: false, 
            itemStyle: {
               color: 'rgb(255, 70, 131)', 
            }, 
            data: that.dataSource.predict_values,
          },
        ],
      }

      option && myChart.setOption(option)
      window.onresize = function () {
        setTimeout(function () {
          myChart.resize()
        }, 10)
      }
    },
    getText(key) {
      let filterList = this.jSelectMultipleOptions.filter((item) => item.value == key)
      if (filterList.length > 0) {
        return filterList[0].text
      }
      return ''
    },
  },
}
</script>